<template>
  <div class="app-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="mb8">
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>配置总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="statistic-number">{{ statistics.configCount }}</div>
            <div class="statistic-label">个配置</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>任务总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="statistic-number">{{ statistics.taskCount }}</div>
            <div class="statistic-label">个任务</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>运行中任务</span>
            </div>
          </template>
          <div class="card-content">
            <div class="statistic-number running">{{ statistics.runningCount }}</div>
            <div class="statistic-label">个任务</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>今日爬取</span>
            </div>
          </template>
          <div class="card-content">
            <div class="statistic-number">{{ statistics.todayCount }}</div>
            <div class="statistic-label">条数据</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作 -->
    <el-row :gutter="20" class="mb8">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>快速操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="primary" icon="Plus" @click="handleAddConfig" class="action-btn">
              新增配置
            </el-button>
            <el-button type="success" icon="VideoPlay" @click="handleNewTask" class="action-btn">
              新建任务
            </el-button>

            <el-button type="info" icon="View" @click="handleViewResults" class="action-btn">
              查看结果
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>最近任务</span>
            </div>
          </template>
          <div class="recent-tasks">
            <div v-if="recentTasks.length === 0" class="empty-tasks">
              <el-empty description="暂无任务" />
            </div>
            <div v-else class="task-list">
              <div v-for="task in recentTasks" :key="task.id" class="task-item">
                <div class="task-info">
                  <div class="task-name">{{ task.taskName }}</div>
                  <div class="task-config">{{ task.configName }}</div>
                </div>
                <div class="task-status">
                  <el-tag :type="getStatusType(task.status)" size="small">
                    {{ getStatusText(task.status) }}
                  </el-tag>
                </div>
                <div class="task-time">{{ parseTime(task.startTime) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 配置列表 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>配置管理</span>
          <el-button type="primary" icon="Plus" @click="handleAddConfig" size="small">
            新增配置
          </el-button>
        </div>
      </template>
      <el-table :data="configList" style="width: 100%">
        <el-table-column prop="configName" label="配置名称" />
        <el-table-column prop="siteName" label="网站名称" />
        <el-table-column prop="baseUrl" label="基础URL" :show-overflow-tooltip="true" />
        <el-table-column prop="maxPages" label="最大页数" width="100" />
        <el-table-column prop="enabled" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.enabled ? 'success' : 'info'">
              {{ scope.row.enabled ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEditConfig(scope.row)">
              编辑
            </el-button>
            <el-button link type="primary" icon="VideoPlay" @click="handleTestConfig(scope.row)">
              测试
            </el-button>
            <el-button link type="primary" icon="Delete" @click="handleDeleteConfig(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


  </div>
</template>

<script setup name="CrawlerIndex">
import { listConfig, testConfig as testConfigApi } from "@/api/system/crawler/config";
import { listTask } from "@/api/system/crawler/task";

const { proxy } = getCurrentInstance();

const configList = ref([]);
const recentTasks = ref([]);


const statistics = ref({
  configCount: 0,
  taskCount: 0,
  runningCount: 0,
  todayCount: 0
});



/** 获取配置列表 */
function getConfigList() {
  listConfig().then(response => {
    configList.value = response.rows;
    statistics.value.configCount = response.rows.length;
  });
}

/** 获取最近任务 */
function getRecentTasks() {
  listTask({ pageSize: 5 }).then(response => {
    recentTasks.value = response.rows;
    statistics.value.taskCount = response.total;
    statistics.value.runningCount = response.rows.filter(task => task.status === 'RUNNING').length;
  });
}

/** 获取状态类型 */
function getStatusType(status) {
  const statusMap = {
    'RUNNING': 'primary',
    'SUCCESS': 'success',
    'FAILED': 'danger',
    'CANCELLED': 'info'
  };
  return statusMap[status] || 'info';
}

/** 获取状态文本 */
function getStatusText(status) {
  const statusMap = {
    'RUNNING': '运行中',
    'SUCCESS': '已完成',
    'FAILED': '失败',
    'CANCELLED': '已取消'
  };
  return statusMap[status] || status;
}

/** 新增配置 */
function handleAddConfig() {
  proxy.$router.push('/crawler/config');
}

/** 编辑配置 */
function handleEditConfig(row) {
  proxy.$router.push(`/crawler/config/edit/${row.id}`);
}

/** 测试配置 */
function handleTestConfig(row) {
  proxy.$modal.confirm('是否确认测试配置"' + row.configName + '"？').then(function() {
    return testConfigApi(row);
  }).then(() => {
    proxy.$modal.msgSuccess("配置测试通过");
  }).catch(() => {
    proxy.$modal.msgError("配置测试失败");
  });
}

/** 删除配置 */
function handleDeleteConfig(row) {
  proxy.$modal.confirm('是否确认删除配置"' + row.configName + '"？').then(function() {
    // 这里需要调用删除接口
    proxy.$modal.msgSuccess("删除成功");
    getConfigList();
  }).catch(() => {});
}

/** 新建任务 */
function handleNewTask() {
  proxy.$router.push('/crawler/task');
}



/** 查看结果 */
function handleViewResults() {
  proxy.$router.push('/system/policy');
}

// 初始化数据
getConfigList();
getRecentTasks();
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.statistic-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
}

.statistic-number.running {
  color: #67c23a;
}

.statistic-label {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.action-btn {
  flex: 1;
  min-width: 120px;
}

.recent-tasks {
  max-height: 300px;
  overflow-y: auto;
}

.empty-tasks {
  padding: 20px;
}

.task-list {
  padding: 10px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.task-item:last-child {
  border-bottom: none;
}

.task-info {
  flex: 1;
}

.task-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.task-config {
  font-size: 12px;
  color: #909399;
}

.task-status {
  margin: 0 10px;
}

.task-time {
  font-size: 12px;
  color: #909399;
}
</style> 